<template>
	<view>
		<!-- tab -->
		<view class="tab-box">
			<u-tabs bg-color="#ffffff" inactive-color="#999" name="tab_name" :list="tabs" active-color="#616161"
				:is-scroll="false" c :current="current" @change="tabChange"></u-tabs>
		</view>
		<view class='p-20'>
			<!-- 约拍 -->
			<view>
				<post-list type='space' :isShowHandle="false" :isShowUser="false" :list="lists" :loadStatus="loadStatus"></post-list>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import postList from '../../components/post-list/post-list.vue';
	export default {
		components: {
			postList
		},
		data() {
			return {
				loading:true,
				btnStyle: {
					color: "#fff",
					backgroundColor: '#efd234'
				},
				btnStyle2: {
					border: '1px solid #efd234',
					color: "#efd234"
				},
				background: {
					backgroundColor: 'unset'
				},
				tabs: [{
						tab_name: '审核中',
						status:0
					},{
						tab_name: '展示中',
						status:1
					},{
						tab_name: '审核失败',
						status:-1
					}
				],
				current: 0,
				uuid: 0,
			
				user: {},
				userJson: "",
				lists:[],
				loadStatus: "loading",
				page: 1,
			
			};
		},
		computed:{
			...mapState(['hasLogin', 'userInfo']),
		},
		onLoad(options) {
			this.getSpaceList();	
		},
		onReachBottom() {
			if(this.loadStatus!='nomore') {
				this.page++;
				this.getSpaceList();
			}
		},
		methods: {
			async getSpaceList() {
				this.loadStatus = 'loading';
				let res = await this.$api('space')
				this.lists = this.lists.concat(res.data.list);
				if (this.page === res.data.total_pages || res.data.total_pages === 0) {
					this.loadStatus = 'nomore';
				} else {
					this.loadStatus = 'loadmore';
				}
			},	
			tabChange(index) {
				if(this.current==index) return;
				this.current = index;
				this.page = 1;
				this.loadStatus = 'loading';
				this.lists = [];
				this.getSpaceList();
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.tag-box {
		.tag{
			padding: 0rpx 10rpx;
			margin-right: 10rpx;
			border-radius: 5rpx;
			font-size: 22rpx;
			background-color: #f5f5f5;
			color: #616161;
		}
		
		.tag-guaranty {
			color: #ffffff;
			background-color: #24B19A;
		}
		
		.tag-cert {
			color: #ffffff;
			background-color: #5A84FB;
		}
	}
</style>
